<template>
	<view class="agreement-container">
		<!-- 加载状态 -->
		<view class="loading-section" v-if="isLoading">
			<view class="loading-content">
				<u-loading mode="circle" color="#73F0EA" size="40"></u-loading>
				<text class="loading-text">{{loadingText}}</text>
			</view>
		</view>

		<!-- 协议内容 -->
		<scroll-view scroll-y="true" class="content-scroll" :style="scrollStyle" v-else-if="content">
			<view class="agreement-content">
				<!-- 协议标题区域 -->
				<view class="title-section" v-if="showTitle && agreementTitle">
					<view class="title-gradient">
						<text class="main-title">{{agreementTitle}}</text>
						<text class="update-time" v-if="updateTime">更新时间：{{updateTime}}</text>
					</view>
				</view>

				<!-- HTML内容区域 -->
				<view class="html-content">
					<u-parse :html="processedContent"></u-parse>
				</view>

				<!-- 底部留白 -->
				<view class="bottom-spacer"></view>
			</view>
		</scroll-view>

		<!-- 错误状态 -->
		<view class="error-section" v-else>
			<view class="error-content">
				<u-icon name="wifi-off" color="#CCCCCC" size="80"></u-icon>
				<text class="error-title">{{errorTitle}}</text>
				<text class="error-desc">{{errorMessage}}</text>
				<view class="retry-btn" @click="handleRetry">
					<u-icon name="reload" color="#73F0EA" size="16"></u-icon>
					<text class="retry-text">重新加载</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'AgreementPage',
		props: {
			// 是否显示标题区域
			showTitle: {
				type: Boolean,
				default: true
			},
			// 加载文本
			loadingText: {
				type: String,
				default: '加载中...'
			},
			// 错误标题
			errorTitle: {
				type: String,
				default: '加载失败'
			},
			// 错误描述
			errorMessage: {
				type: String,
				default: '网络连接异常，请检查网络后重试'
			},
			// 主题色
			themeColor: {
				type: String,
				default: '#73F0EA'
			}
		},

		data() {
			return {
				content: '',
				isLoading: true,
				agreementTitle: '',
				updateTime: '',
				hasError: false
			}
		},

		computed: {
			// 滚动区域样式
			scrollStyle() {
				return {
					height: '100vh'
				}
			},

			// 处理HTML内容，优化显示效果
			processedContent() {
				if (!this.content) return '';

				let processed = this.content;

				// 为图片添加统一样式
				processed = processed.replace(/<img/g,
					'<img style="width: 100%; border-radius: 12rpx; margin: 20rpx 0; box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);"'
					);

				// 为段落添加样式
				processed = processed.replace(/<p/g,
					'<p style="line-height: 1.8; margin: 16rpx 0; color: #333; font-size: 28rpx; text-align: justify;"'
					);

				// 为标题添加样式
				processed = processed.replace(/<h([1-6])/g,
					'<h$1 style="margin: 32rpx 0 16rpx 0; color: #333; font-weight: bold; line-height: 1.3;"');

				// 为列表添加样式
				processed = processed.replace(/<ul/g, '<ul style="margin: 16rpx 0; padding-left: 32rpx;"');
				processed = processed.replace(/<ol/g, '<ol style="margin: 16rpx 0; padding-left: 32rpx;"');
				processed = processed.replace(/<li/g,
					'<li style="margin: 8rpx 0; color: #333; font-size: 28rpx; line-height: 1.6;"');

				return processed;
			}
		},

		methods: {
			// 设置内容
			setContent(data) {
				this.content = data.content || '';
				this.agreementTitle = data.title || '';
				this.updateTime = data.update_time || '';
				this.isLoading = false;
				this.hasError = false;

				// 设置页面标题
				if (data.title) {
					uni.setNavigationBarTitle({
						title: data.title
					});
				}
			},

			// 设置加载状态
			setLoading(loading = true) {
				this.isLoading = loading;
			},

			// 设置错误状态
			setError(message = '') {
				this.isLoading = false;
				this.hasError = true;
				this.content = '';

				if (message) {
					uni.showToast({
						title: message,
						icon: 'none',
						duration: 2000
					});
				}
			},

			// 重试处理
			handleRetry() {
				this.$emit('retry');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.agreement-container {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background: #f8f8f8;
	}

	/* 加载状态 */
	.loading-section {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #ffffff;

		.loading-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 100rpx 0;

			.loading-text {
				margin-top: 24rpx;
				font-size: 28rpx;
				color: #666666;
			}
		}
	}

	/* 内容区域 */
	.content-scroll {
		flex: 1;
	}

	.agreement-content {
		background: #ffffff;
		min-height: 100vh;
	}

	/* 标题区域 */
	.title-section {
		border-bottom: 1rpx solid #f0f0f0;

		.title-gradient {
			padding: 40rpx 32rpx 32rpx;
			background: linear-gradient(135deg, #73F0EA 0%, #81CAC5 100%);
			position: relative;

			// 添加微妙的装饰
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 2rpx;
				background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
			}

			.main-title {
				display: block;
				font-size: 36rpx;
				font-weight: bold;
				color: #ffffff;
				line-height: 1.4;
				margin-bottom: 16rpx;
				text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
			}

			.update-time {
				display: block;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.8);
			}
		}
	}

	/* HTML内容区域 */
	.html-content {
		padding: 32rpx;

		// 深度选择器优化HTML内容样式
		::v-deep {

			// 段落样式
			p {
				line-height: 1.8 !important;
				margin: 16rpx 0 !important;
				color: #333333 !important;
				font-size: 28rpx !important;
				text-align: justify !important;
			}

			// 标题样式
			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				margin: 32rpx 0 16rpx 0 !important;
				color: #333333 !important;
				font-weight: bold !important;
				line-height: 1.3 !important;
			}

			h1 {
				font-size: 40rpx !important;
				color: #73F0EA !important;
			}

			h2 {
				font-size: 36rpx !important;
				border-left: 4rpx solid #73F0EA;
				padding-left: 16rpx;
			}

			h3 {
				font-size: 32rpx !important;
			}

			h4 {
				font-size: 30rpx !important;
			}

			h5 {
				font-size: 28rpx !important;
			}

			h6 {
				font-size: 26rpx !important;
			}

			// 列表样式
			ul,
			ol {
				margin: 16rpx 0 !important;
				padding-left: 32rpx !important;

				li {
					margin: 8rpx 0 !important;
					color: #333333 !important;
					font-size: 28rpx !important;
					line-height: 1.6 !important;
					position: relative;
				}
			}

			// 无序列表特殊样式
			ul li::marker {
				color: #73F0EA !important;
			}

			// 图片样式
			img {
				width: 100% !important;
				border-radius: 12rpx !important;
				margin: 20rpx 0 !important;
				box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1) !important;
			}

			// 强调文本
			strong,
			b {
				color: #73F0EA !important;
				font-weight: bold !important;
			}

			// 链接样式
			a {
				color: #73F0EA !important;
				text-decoration: underline !important;
			}

			// 分割线
			hr {
				border: none !important;
				height: 2rpx !important;
				background: linear-gradient(90deg, transparent, #e0e0e0, transparent) !important;
				margin: 32rpx 0 !important;
			}

			// 表格样式
			table {
				width: 100% !important;
				border-collapse: collapse !important;
				margin: 24rpx 0 !important;
				border-radius: 8rpx !important;
				overflow: hidden !important;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1) !important;

				th,
				td {
					border: 1rpx solid #e0e0e0 !important;
					padding: 16rpx !important;
					text-align: left !important;
					font-size: 26rpx !important;
				}

				th {
					background: linear-gradient(135deg, #73F0EA, #81CAC5) !important;
					font-weight: bold !important;
					color: #ffffff !important;
				}

				tr:nth-child(even) {
					background: #fafafa !important;
				}
			}

			// 引用块样式
			blockquote {
				background: rgba(115, 240, 234, 0.05) !important;
				border-left: 4rpx solid #73F0EA !important;
				padding: 24rpx !important;
				margin: 16rpx 0 !important;
				border-radius: 0 8rpx 8rpx 0 !important;
				font-style: italic !important;
				color: #666666 !important;
			}

			// 代码样式
			code {
				background: #f5f5f5 !important;
				padding: 4rpx 8rpx !important;
				border-radius: 4rpx !important;
				font-family: monospace !important;
				color: #73F0EA !important;
				font-size: 24rpx !important;
			}

			pre {
				background: #f5f5f5 !important;
				border-radius: 8rpx !important;
				padding: 24rpx !important;
				margin: 16rpx 0 !important;
				overflow-x: auto !important;

				code {
					background: none !important;
					padding: 0 !important;
					color: #333333 !important;
				}
			}
		}
	}

	/* 底部留白 */
	.bottom-spacer {
		height: 80rpx;
		background: #ffffff;
	}

	/* 错误状态 */
	.error-section {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #ffffff;

		.error-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 100rpx 40rpx;

			.error-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				margin: 32rpx 0 16rpx;
			}

			.error-desc {
				font-size: 28rpx;
				color: #666666;
				text-align: center;
				line-height: 1.5;
				margin-bottom: 40rpx;
			}

			.retry-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 16rpx 32rpx;
				background: rgba(115, 240, 234, 0.1);
				border: 2rpx solid #73F0EA;
				border-radius: 50rpx;
				transition: all 0.3s ease;

				.retry-text {
					margin-left: 8rpx;
					font-size: 28rpx;
					color: #73F0EA;
				}

				&:active {
					background: rgba(115, 240, 234, 0.2);
					transform: scale(0.98);
				}
			}
		}
	}
</style>